[ตอนที่ 6] เวิร์คช้อป CMS อย่างง่าย เก็บข้อมูลลงฐานข้อมูล
ก่อนจะไปต่อ เราจะมาพูดถึงเทคนิคการแสดงผลข้อมูลในลักษณะของลิสต์รายการ ซึ่งสามารถจัดการได้ง่ายๆด้วย View ของคชสาร
ในการแสดงผลลิสต์รายการ จะแบ่งเทมเพลตออกเป็นสองส่วน ส่วนแรกคือเทมเพลตหลัก ผมสมมุติให้เทมเพลตหลักมีโค้ดตามนี้
จะเห็นว่าเทมเพลตหลักจะประกอบด้วยโค้ดที่เป็นกรอบของลิสต์รายการ (เช่น ul หรือ tag อื่นใดก็ได้) และที่สำคัญต้องมีตัวแปรของเทมเพลต {LIST} และ เทมเพลตอีกอันซึ่งอาจมีเนื้อหาประมาณนี้
แนวคิดการใช้งานเทมเพลตของคชสารก็คือ เราจะทำการอ่านข้อมูลออกมา สมมุติว่ามีข้อมูล 10 รายการเป็นตัวเลข no 1 - 10 เราจะเอาข้อมูลที่ได้ใส่ลงใน ลิสต์รายการ โดยการแทนที่ตัวแปร {NO} ด้วยลำดับของข้อมูล no ที่อ่านได้ ซึ่งจะได้เป็นแอเรย์ของ li จำนวน 10 รายการ
เสร็จแล้วนำข้อมูลลิสต์ของ li ที่ได้ใส่ลงในเทมเพลตหลักที่ตำแหน่ง {LIST} ซึ่งจะทำให้ได้โค้ดผลลัพท์สุดท้ายเป็น
ซึ่งผลลัพท์สุดท้าย ก็คือลิสต์รายการที่สามารถในไปใช้งานต่อได้นั่นเอง
จากทฤษฎี เราจะมาดูโค้ดหน้า View ของสมุดเยี่ยมกัน
บรรทัดแรกเลยจะมีการเรียกใช้งาน session ก่อนเนื่องจากในการโพสต์สมุดเยี่ยมจะต้องมีการตรวจสอบ Antispam ด้วย
ถัดมาก็จะมีการโหลดเทมเพลตส่วนของรายการสมุดเยี่ยม (item.html) และทำการวนลูปรายการสมุดเยี่ยมจากตัวแปร $index->items ใส่ข้อมูลต่างๆลงในเทมเพลตทีละอันจนครบ
เสร็จแล้วทำการสร้าง View นำข้อมูลที่ได้ใส่ลงในเทมเพลตหลักของสมุดเยี่ยม ไฟล์ main.html
ไฟล์ main.html นอกจากจะมีเทมเพลตส่วนของลิสต์รายการแล้ว ยังมีเทมเพลตส่วนของฟอร์มสำหรับเขียนสมุดเยี่ยมอยู่ด้วย และยังมีส่วนของ Javascript ที่ใช้สำหรับฟอร์มด้วย
ที่ฟอร์มเขียนสมุดเยี่ยมนี้มีการป้องกันการฟลัดข้อมูลด้วยการใช้งาน Antispam
โค้ดสำหรับสร้างรหัส Antispam
และนำไปใส่ลงในฟอร์มด้วยคำสั่งตามด้านบน
โค้ดด้านบนคือโค้ดสำหรับแสดงตัวแบ่งหน้า ซึ่งจะใช้ข้อมูลที่ได้จาก $index นำมาสร้างตัวแบ่งหน้า
มีข้อสังเกตุนิดหน่อยของการโหลดเทมเพลตของสมุดเยี่ยม คือมีการระบุตัวแปร guestbook ที่ตัวแปรแรกซึ่งจะสัมพันธ์กันกับไฟล์เทมเพลต เพราะมันคือชื่อโฟลเดอร์หรือโมดูลของเทมเพลตนั่นเอง ดังนั้นในกรณีของไฟล์ main.html จะเก็บอยู่ที่ skin/default/guestbook/main.html และ item จะเก็บไว้ที่ skin/default/guestbook/item.html
ข้อมูลทั้งหมดหลังจากแทนที่ข้อมูลลงในเทมเพลตหมดแล้ว จะถูกส่งกลับไปแสดงผลตามปกติ
ในการแสดงผลลิสต์รายการ จะแบ่งเทมเพลตออกเป็นสองส่วน ส่วนแรกคือเทมเพลตหลัก ผมสมมุติให้เทมเพลตหลักมีโค้ดตามนี้
<ul>{LIST}</ul>
จะเห็นว่าเทมเพลตหลักจะประกอบด้วยโค้ดที่เป็นกรอบของลิสต์รายการ (เช่น ul หรือ tag อื่นใดก็ได้) และที่สำคัญต้องมีตัวแปรของเทมเพลต {LIST} และ เทมเพลตอีกอันซึ่งอาจมีเนื้อหาประมาณนี้
<li>ลิสต์รายการที่ {NO}</li>
แนวคิดการใช้งานเทมเพลตของคชสารก็คือ เราจะทำการอ่านข้อมูลออกมา สมมุติว่ามีข้อมูล 10 รายการเป็นตัวเลข no 1 - 10 เราจะเอาข้อมูลที่ได้ใส่ลงใน ลิสต์รายการ โดยการแทนที่ตัวแปร {NO} ด้วยลำดับของข้อมูล no ที่อ่านได้ ซึ่งจะได้เป็นแอเรย์ของ li จำนวน 10 รายการ
เสร็จแล้วนำข้อมูลลิสต์ของ li ที่ได้ใส่ลงในเทมเพลตหลักที่ตำแหน่ง {LIST} ซึ่งจะทำให้ได้โค้ดผลลัพท์สุดท้ายเป็น
<ul>
<li>ลิสต์รายการที่ 1</li>
<li>ลิสต์รายการที่ 2</li>
.....
<li>ลิสต์รายการที่ 10</li>
</ul>
ซึ่งผลลัพท์สุดท้าย ก็คือลิสต์รายการที่สามารถในไปใช้งานต่อได้นั่นเอง
จากทฤษฎี เราจะมาดูโค้ดหน้า View ของสมุดเยี่ยมกัน
namespace Guestbook\Index;
use \Kotchasan\Http\Request;
use \Kotchasan\Date;
use \Kotchasan\Template;
use \Kotchasan\Antispam;
class View extends \Kotchasan\View
{
public static function render(Request $request, $index)
{
// session
$request->initSession();
// โหลด template ของรายการ (item.html)
$listitem = Template::create('guestbook', '', 'item');
// วนลูปแทนที่ข้อมูลลงใน template
foreach ($index->items as $item) {
$listitem->add(array(
'/{ID}/' => $item->id,
'/{DETAIL}/' => nl2br($item->detail),
'/{NAME}/' => $item->name,
'/{CREATE}/' => Date::format($item->create_date),
'/{IP}/' => $item->ip
));
}
// View
$view = new static;
// antispam
$antispam = new Antispam();
// ใส่เนื้อหาลงใน View ตามที่กำหนดใน Template
$view->setContents(array(
// topic
'/{TOPIC}/' => 'สมุดเยี่ยม',
// เนื้อหา
'/{LIST}/' => $listitem->render(),
// แบ่งหน้า
'/{SPLITPAGE}/' => $request->getUri()->pagination($index->totalpage, $index->page),
// Antispam
'/{ANTISPAM}/' => $antispam->getId()
));
// โหลด template หน้า main (main.html)
$template = Template::load('guestbook', '', 'main');
// คืนค่า
return $view->renderHTML($template);
}
}
บรรทัดแรกเลยจะมีการเรียกใช้งาน session ก่อนเนื่องจากในการโพสต์สมุดเยี่ยมจะต้องมีการตรวจสอบ Antispam ด้วย
// session
$request->initSession();
// โหลด template ของรายการ (item.html)
$listitem = Template::create('guestbook', '', 'item');
// วนลูปแทนที่ข้อมูลลงใน template
foreach ($index->items as $item) {
$listitem->add(array(
'/{ID}/' => $item->id,
'/{DETAIL}/' => nl2br($item->detail),
'/{NAME}/' => $item->name,
'/{CREATE}/' => Date::format($item->create_date),
'/{IP}/' => $item->ip
));
}
ถัดมาก็จะมีการโหลดเทมเพลตส่วนของรายการสมุดเยี่ยม (item.html) และทำการวนลูปรายการสมุดเยี่ยมจากตัวแปร $index->items ใส่ข้อมูลต่างๆลงในเทมเพลตทีละอันจนครบ
เสร็จแล้วทำการสร้าง View นำข้อมูลที่ได้ใส่ลงในเทมเพลตหลักของสมุดเยี่ยม ไฟล์ main.html
// View
$view = new static;
// antispam
$antispam = new Antispam();
// ใส่เนื้อหาลงใน View ตามที่กำหนดใน Template
$view->setContents(array(
// topic
'/{TOPIC}/' => 'สมุดเยี่ยม',
// เนื้อหา
'/{LIST}/' => $listitem->render(),
// แบ่งหน้า
'/{SPLITPAGE}/' => $request->getUri()->pagination($index->totalpage, $index->page),
// Antispam
'/{ANTISPAM}/' => $antispam->getId()
));
// โหลด template หน้า main (main.html)
$template = Template::load('guestbook', '', 'main');
// คืนค่า
return $view->renderHTML($template);
ไฟล์ main.html นอกจากจะมีเทมเพลตส่วนของลิสต์รายการแล้ว ยังมีเทมเพลตส่วนของฟอร์มสำหรับเขียนสมุดเยี่ยมอยู่ด้วย และยังมีส่วนของ Javascript ที่ใช้สำหรับฟอร์มด้วย
ที่ฟอร์มเขียนสมุดเยี่ยมนี้มีการป้องกันการฟลัดข้อมูลด้วยการใช้งาน Antispam
// antispam
$antispam = new Antispam();
โค้ดสำหรับสร้างรหัส Antispam
// Antispam
'/{ANTISPAM}/' => $antispam->getId()
และนำไปใส่ลงในฟอร์มด้วยคำสั่งตามด้านบน
// แบ่งหน้า
'/{SPLITPAGE}/' => $request->getUri()->pagination($index->totalpage, $index->page),
โค้ดด้านบนคือโค้ดสำหรับแสดงตัวแบ่งหน้า ซึ่งจะใช้ข้อมูลที่ได้จาก $index นำมาสร้างตัวแบ่งหน้า
// โหลด template หน้า main (main.html)
$template = Template::load('guestbook', '', 'main');
มีข้อสังเกตุนิดหน่อยของการโหลดเทมเพลตของสมุดเยี่ยม คือมีการระบุตัวแปร guestbook ที่ตัวแปรแรกซึ่งจะสัมพันธ์กันกับไฟล์เทมเพลต เพราะมันคือชื่อโฟลเดอร์หรือโมดูลของเทมเพลตนั่นเอง ดังนั้นในกรณีของไฟล์ main.html จะเก็บอยู่ที่ skin/default/guestbook/main.html และ item จะเก็บไว้ที่ skin/default/guestbook/item.html
ข้อมูลทั้งหมดหลังจากแทนที่ข้อมูลลงในเทมเพลตหมดแล้ว จะถูกส่งกลับไปแสดงผลตามปกติ